<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertical-algin
		 使用方法：1.用于表格中单元格垂直居中
		 2.用于行内元素以及行内块元素
		 【文本和图片垂直居中（对齐）效果】
		  对齐分为四种：基线对齐、顶部对齐
		 					  			   居中对齐、底部对齐
		 					  元素种类：块元素、行元素、行内块元素
		 					  块元素特点：独占一行，设置宽高
		 					  行元素特点：一行内显示，不可设置宽高
		 					  网页：元素之间嵌套生成
							  行元素与块元素可以任意嵌套
							  前提：设置宽高---行套块
							                          ---块套块√
													  ---块套行√
							前提：一行内显示 ---行套块√
							                          ---块套块×
													  ---块套行
													  ---行套行√
		 -->
		 <style>
			 p img:nth-child(1){
				 /* vertical-align: baseline  默认基线对齐*/
				 vertical-align: baseline;
	
			 }
			 /* 问题:派生选择器，特点：找后代     p    img     */
			 p img:nth-child(2){
			 				 /* vertical-align: baseline  默认基线对齐*/
			 				 vertical-align: baseline;
			 				 width: 500px;
			 				 height: 500px;
			 				 background: white;
			 }
				 
			 img.baseline{
				 vertical-align: baseline;
			 }
			 img.middle{
				 vertical-align: middle;
			 }
			 img.top{
				 vertical-align: top;
			 }
			 img.bottom{
				 vertical-align: bottom;
			 }
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p ，嵌套文字：   图片叫什么名字
		                                      文字后加img，设定宽高：25~100px
											 每个图片加：基线对齐、顶部对齐
											 		 			 居中对齐、底部对齐 -->
		<h1>文本与图片垂直属性</h1>
		 <p>哪吒<img class="baseline" src="img/22e19dc8a5514dc2b5bf9983f5f8b373.gif" alt="哪吒" width="150px"
		 height="150px"/>基线对齐</p>
		 <p>太乙真人<img class="top" src="img/12.png"alt="太乙真人" width="150px"
		 height="150px"/>顶部对齐</p>
		 <p>敖丙<img  class="middle"src="img/13.png" alt="敖丙" width="150px"
		 height="150px"/>居中对齐</p>
		 <p>魔丸<img class="bottom"src="img/14.png""alt="魔丸" width="150px"
		 height="150px"/>底部对齐</p>
		 <!-- css选择器--抓第一张图片...
		  思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		  错误原因：html结构不符合派生特点：p包含4个img
		  伪类
		  p img：nth-child（1）【】
		  -->
	</body>
</html>